<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body,
      #app {
        height: 100%;
      }

      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .box {
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      header {
        text-align: center;
        line-height: 46px;
        height: 46px;
        background: orange;
        color: #fff;
      }

      .back {
        position: absolute;
        left: 10px;
      }

      main {
        flex: 1;
      }

      footer {
        text-align: center;
        line-height: 46px;
        height: 46px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- <my-layout title="登录" :isshowback="false">
            <img slot="img" width="100%" height="180px"
                src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657818000&t=ae9557b80212ae1619d76586feecd45a"
                alt="">

            <my-form title="登录" api="/api/login" slot="form"></my-form>
        </my-layout> -->

      <my-layout title="注册" :isshowback="false">
        <img
          slot="img"
          width="100%"
          height="180px"
          src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657818000&t=ae9557b80212ae1619d76586feecd45a"
          alt=""
        />

        <my-form title="注册" api="/api/register" slot="form"></my-form>
      </my-layout>
    </div>

    <!-- 容器组件 -->
    <template id="layout">
      <div class="box">
        <header v-if="isshowheader">
          <span v-if="isshowback" class="back"> 返回 </span>
          {{ title }}
        </header>

        <main>
          <slot name="img"></slot>
          <slot name="form"></slot>
        </main>

        <footer>我是底部</footer>
      </div>
    </template>

    <!-- 表单组件 -->
    <template id="form">
      <div>
        <p>账号：<input type="text" /></p>
        <p>密码：<input type="text" /></p>
        <p>
          <button @click="sub">{{ title }}</button>
        </p>
      </div>
    </template>

    <!-- /api/login -->
    <!-- /api/register -->

    <script src="../vue.js"></script>
    <script>
      const LayOut = {
        template: "#layout",
        props: {
          // 标题
          title: {
            type: String,
            default: "我是默认标题",
          },
          // 是否展示返回
          isshowback: {
            type: Boolean,
            default: true,
          },
          // 是否展示头部
          isshowheader: {
            type: Boolean,
            default: true,
          },
        },
      };

      const Form = {
        template: "#form",
        props: {
          title: {
            type: String,
          },
          // 接口地址
          api: {
            type: String,
          },
        },
        methods: {
          sub() {
            console.log(this.api);
          },
        },
      };
      new Vue({
        el: "#app",
        components: {
          "my-layout": LayOut,
          "my-form": Form,
        },
        data: {
          msg: "登录",
        },
      });
    </script>
  </body>
</html>
